<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360小项目</title>
    <link rel="stylesheet" href="css/fullpage.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 固定导航栏 -->
    <div class="header">
        <div class="nav">
            <div class="log">
                <img src="images/nav_log.png" alt="">
            </div>
            <div class="navs">
                <ul>
                    <li><a href="https://www.blog-qh.com">Mac版</a></li>
                    <li><a href="https://www.blog-qh.com">扩展</a></li>
                    <li><a href="https://www.blog-qh.com">论坛</a></li>
                </ul>
            </div>
        </div>

    </div>
    <!-- 固定导航栏 -->
    <div id="fullpage">
        <!-- 第一页开始-->
        <div class="section section_img">
            <div class="onetitle">
                <p>畅快浏览 极致体验</p>
                <a href="#">立即体验</a>
            </div>
            <img src="images/ball1.png" alt="" class="ball1">
            <img src="images/ball2.png" alt="" class="ball2">
            <img src="images/ship.png" alt="" class="ship">
        </div>
        <!-- 第二页开始 -->
        <div class="section">
            <video autoplay loop muted>
                <source src="https://s2.ssl.qhres.com/static/dfeefadde568eab0.mp4" type="video/mp4">
                您的浏览器不支持video标签
            </video>
            <div class="text_box">
                <p class="big_text">极速</p>
                <div></div>
                <p class="mid_text">Chromium78全新内核</p>
                <p class="small_text">性能强劲，快如闪电</p>
                <a href="#">立即体验</a>
            </div>
        </div>
        <!-- 第三页 -->
        <div class="section">
            <video autoplay loop muted>
                <source src="https://s3.ssl.qhres.com/static/9bebcedf292f327e.mp4" type="video/mp4">
                您的浏览器不支持video标签
            </video>
            <div class="text_box">
                <p class="big_text">极酷</p>
                <div></div>
                <p class="mid_text">暗夜炫黑模式</p>
                <p class="small_text">定义酷，定义你</p>
                <a href="#">立即体验</a>
            </div>
        </div>
        <!-- 第四页 -->
        <div class="section">
            <video autoplay loop muted>
                <source src="https://s1.ssl.qhres.com/static/fdf92889c539303c.mp4" type="video/mp4">
                您的浏览器不支持video标签
            </video>
            <div class="text_box">
                <p class="big_text">极安全</p>
                <div></div>
                <p class="mid_text">DNS加密反防劫持</p>
                <p class="small_text">安全升级，肆意无忌</p>
                <a href="#">立即体验</a>
            </div>
        </div>
        <!-- 第五页 -->
        <div class="section">
            <video autoplay loop muted>
                <source src="https://s1.ssl.qhres.com/static/7e7f0ec4a0cc7a66.mp4" type="video/mp4">
                您的浏览器不支持video标签
            </video>
            <div class="text_box">
                <p class="big_text">极视界</p>
                <div></div>
                <p class="mid_text">4K高清视频播放</p>
                <p class="small_text">还原真实之美，尽显万物本色</p>
                <a href="#">立即体验</a>
            </div>
            <div class="footer">
                Copyright © 2005-2019 360.CN All Rights Reserved 360互联网安全中心 隐私权政策 京ICP证080047号 <br>
                <img src="images/icon.png" alt=""> 京公网安备 11000002000006号
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/fullpage.js"></script>
    <script>
        $(function () {
            $('#fullpage').fullpage({
                'navigation': true,
                afterLoad: function () {
                    $(this).find('.text_box').fadeIn();
                },
                onLeave: function () {
                    $(this).find('.text_box').fadeOut();
                },
            });
        });
    </script>

</body>

</html>